<template>
  <section>
    <el-row>
      <el-col class="header" :span="21">
        <div class="title">
          <span>数据统计</span>
        </div>
      </el-col>
    </el-row>

    <!-- 显示表格区域 -->
    <el-row>
      <el-col :span="21">
        <!-- 显示表格区域 -->
        <el-card>
          <el-table border :data="statisticsList">
            <el-table-column type="index" label="#" width="50">
            </el-table-column>
            <el-table-column type="expand">
              <template v-slot="scope">
                <div class="Result">
                  <div class="surveyResult">
                    <h4>问卷最终结果(含D选项)</h4>
                    <p
                      class="surveyResult"
                      v-for="(val, key, i) in scope.row.surveyResult"
                    >
                      {{ key }}:<span class="value">{{ val }}</span>
                    </p>
                  </div>
                  <div class="surveyResultExceptPoor">
                    <h4>问卷最终结果(不含D选项)</h4>
                    <p
                      class="surveyResultExceptPoor"
                      v-for="(val, key, i) in scope.row.surveyResultExceptPoor"
                    >
                      {{ key }}: <span class="value">{{ val }}</span>
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="组别" prop="groupName"> </el-table-column>
            <el-table-column label="最终结果(含D选项)" prop="result">
            </el-table-column>
            <el-table-column
              label="最终结果(不含D选项)"
              prop="resultExceptPoor"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 显示选择问卷区域 -->
    <el-row>
      <el-col :span="21">
        <el-card>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="(item, index) in surveyList"
              :key="index"
              :label="item.submit"
            >
              <!-- 问卷列表 -->
              <div class="survey">
                <div class="surveyName">
                  <label>问卷名称:</label><span>{{ item.name }}</span>
                </div>
                <div>
                  <label>状态:</label
                  ><span
                    :class="item.status == 0 ? 'weifabu' : 'yifabu'"
                  ></span>
                  |

                  <label>提交人数:</label
                  ><span>{{ item.posted }}/{{ item.recall }}</span>
                </div>
                <div>
                  <label
                    >{{
                      item.submit.abstain == 0 ? "不计算弃票" : "计算弃票"
                    }}:</label
                  >
                  <el-button
                    type="mini"
                    class="updateAbstain"
                    @click="updateAbstain(index)"
                    slot="reference"
                    >更改</el-button
                  >
                  |
                  <span
                    >问卷权重:<el-input
                      size="mini"
                      class="inputWeight"
                      placeholder="权重"
                      type="number"
                      v-model="item.submit.weight"
                  /></span>
                </div>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-col>
    </el-row>

    <!-- 已选择的问卷区域-->
    <el-row>
      <el-col :span="21">
        <el-card class="cardSurvey">
          <h4>已选中问卷</h4>
          <div class="showSurvey">
            <span v-for="(item, index) in checkList" :key="index">{{
              item.name
            }}</span>
          </div>
          <div class="statistics">
            <el-button type="primary" @click="statistics">统计</el-button>
            <el-button type="success">导出为EXCEL表格</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import { $http } from "../../request/service";

export default {
  name: "",
  data() {
    return {
      checkList: [],
      // 问卷列表
      surveyList: [],
      // 统计的数据
      statisticsList: []
    };
  },
  created() {
    this.getSurveyList();
  },
  methods: {
    // 统计表格 并显示表格
    statistics() {
      if (this.checkList.length == 0)
        return this.$message.info("请选择需要生成的问卷");

      console.log(this.checkList);
      // 将选择的问卷发送请求
      $http.post("analysis", this.checkList).then(res => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success("统计结果生成成功");
        // res.data.forEach(item => {
        //   item.surveyResult = item.surveyResult.toString();
        // });
        this.statisticsList = res.data;
        console.log(res);
      });
    },
    // 更改计票方式
    updateAbstain(index) {
      if (!this.surveyList[index].submit.abstain) {
        this.surveyList[index].submit.abstain = 1;
      } else {
        this.surveyList[index].submit.abstain = 0;
      }
    },
    // 请求所有问卷
    getSurveyList() {
      $http.get("survey").then(res => {
        if (res.code !== 200) return this.$message.error(res.message);

        res.data.forEach(item => {
          delete item.type;
          delete item.desc;
          item.submit = {
            abstain: 0, //不算弃票
            surveyId: item.id,
            weight: item.weight,
            name: item.name
          };
        });
        this.surveyList = res.data;
        console.log(res);
      });
    }
  }
};
</script>
<style scoped>
/deep/ .el-table .cell {
  text-align: center;
}
.value {
  color: #0095ff;
}
.Result {
  display: flex;
  justify-content: center;
}
.Result > div {
  border: 1px solid #ccc;
  margin-left: 30px;
  padding: 10px;
}
.statistics {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.showSurvey {
  padding: 30;
  display: flex;
}
.showSurvey span {
  padding: 10px;
  border: 1px solid rgb(240, 239, 239);
  margin-left: 30px;
}
.inputWeight {
  width: 80px;
}
/* /deep/ .el-checkbox__input {
  margin-top: 0;
} */
/deep/ .el-checkbox__inner {
  width: 20px !important;
  height: 20px !important;
}
.el-checkbox-group {
  display: flex !important;
  flex-wrap: wrap;
}
.el-checkbox {
  margin-top: 30px;
  margin-left: 50px;
  display: flex;
  border: 1px solid rgb(202, 201, 201);
  border-radius: 5px !important;
  padding: 5px;
  align-items: center;
}
.updateAbstain {
  border-radius: 30px;
}
.survey div {
  padding: 5px;
  color: black;
}
.surveyName {
  color: black;
  font-weight: 700;
}
.header {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.el-row {
  padding-top: 10px;
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  text-align: start;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
}
.searchWai {
  padding-left: 260px;
}
.yifabu::after {
  content: "◉ 已发布";
  color: #0095ff;
}
.weifabu::after {
  content: "◉ 未发布";
  color: #f34040;
}
</style>
